<template>
  <div style="margin: 30px;width: 800px">
    <el-form :model="teacher" :rules="rules" ref="teacherForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="讲师名称" prop="name">
        <el-input v-model="teacher.name"/>
      </el-form-item>
      <el-form-item label="讲师头衔" prop="level">
        <el-select v-model="teacher.level" placeholder="请选择头衔">
          <el-option label="高级讲师" :value="1"/>
          <el-option label="首席讲师" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历" prop="career">
        <el-input v-model="teacher.career"/>
      </el-form-item>
      <el-form-item label="讲师简介" prop="intro">
        <el-input v-model="teacher.intro" type="textarea" :rows="3"/>
      </el-form-item>
      <el-form-item label="讲师头像">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="teacher.avatar"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
        </el-button>
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          url="/upload/avatar"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即创建</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import {teaSaveOrUpdate} from '@/api/teacher'

export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      api: process.env.VUE_APP_BASE_API,
      teacher: {
        name: '',
        level: '',
        career: '',
        intro: '',
        avatar: 'https://lxledu.oss-cn-hangzhou.aliyuncs.com/avatar/default.jpg'
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      rules: {
        name: [{ required: true, message: '请输入讲师名称', trigger: 'blur' }],
        level: [{ required: true, message: '请输入讲师头衔', trigger: 'blur' }],
        career: [{ required: true, message: '请输入讲师资历', trigger: 'blur' }],
        intro: [{ required: true, message: '请输入讲师简介', trigger: 'blur' }]
      }
    }
  },
  created() {
    if (this.$route.query.teacher) {
      this.teacher = this.$route.query.teacher
    }
  },
  methods: {
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.teacher.avatar = data
      this.imagecropperKey = this.imagecropperKey + 1
    },
    close() {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
    },
    reset() {
      this.$refs.teacherForm.resetFields()
    },
    submitForm() {
      this.$refs.teacherForm.validate((valid) => {
        if (valid) {
          teaSaveOrUpdate(this.teacher).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.teacher = {
                name: '',
                level: '',
                career: '',
                intro: '',
                avatar: '/avatar/default.jpg'
              }
            } else {
              this.$message.error('操作失败')
            }
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
